<template>
    <div class="auto_fill">
        <!--直接引用方式-->
        <div v-for="seltphoto in photolist[1]">
            <!-- {{ seltphoto.items }} -->
            <van-grid :column-num="5" icon-size=70px border=fasle>
                <van-grid-item v-for="items in seltphoto.items" :icon="items.img_url" :url="`${items.action.path}`" />
            </van-grid>
        </div>
        <!--轮播图方式-->
        <van-swipe class="my-swipe" indicator-color="white">
            <van-swipe-item>
                <div v-for="seltphoto in photolist[1]">
                    <van-grid :column-num="5" icon-size=70px border=fasle>
                        <van-grid-item v-for="items in seltphoto.items" :icon="items.img_url"
                            :url="`${items.action.path}`" />

                    </van-grid>
                </div>
            </van-swipe-item>
            <van-swipe-item>
                <div v-for="seltphoto in photolist[2]">

                    <van-grid :column-num="5" icon-size=6rem border=fasle>
                        <van-grid-item v-for="items in seltphoto.items" :icon="items.img_url" />

                    </van-grid>
                </div>
            </van-swipe-item>
        </van-swipe>
    </div>
    <!--商品模块-->
    <div class="products">
        <div v-for="item in photolist " style="margin-bottom: 26px; margin-left: 5px;">
            <div v-if="item.view_type=='list_two_type13' && item.body.items">
                <template v-for=" items in item.body.items" class="vanims">
                    <van-image width="12rem" height="12rem" fit="cover" position="center" :src="items.img_url"
                        style="text-align: center; margin-left: 5px;">
                        <div class="info">
                            <div class="name">{{ items.product_name }}</div>
                            <div class="brief" style="">{{ items.product_brief}}</div>
                            <div class="price" style="color: red; font-size: 15px;">￥{{ items.product_price }}起</div>

                            <div class="productbtn">
                                <van-action-bar-button type="danger" text="立即购买"
                                    @click="onClickButton(items.action.path)" />
                            </div>
                        </div>
                    </van-image>
                </template>
            </div>
        </div>
        <!--更多小米-->
        <div v-for="phone in doubleMphone" class="phones">
            <a :href="phone.action.path">{{ phone.action_title }}</a>
            <van-icon name="arrow" style="line-height: 50px;" />
        </div>
        <!--分割线-->
        <van-divider />
        <!--小米笔记本-->
        <div v-for="notebook in mnotebook" class="notebooks">
            <a :href="generateLink(notebook)">
                <img :src="notebook.img_url" alt="" width="100%" height="300px">
            </a>
        </div>
        <!--更多笔记本-->
        <div v-for="notebook in MoreBook" class="mbook">
            <a :href="getMoreBook(notebook)">{{ notebook.action_title }}</a>
            <van-icon name="arrow" style="line-height: 50px;" />
        </div>
        <!--分割线-->
        <van-divider />

        <!--更多米家智能-->
        <div v-for="Mhome in intelligence" class="mbook">
            <a :href="getMhome(Mhome)">{{ Mhome.action_title }}</a>
            <van-icon name="arrow" style="line-height: 50px;" />
        </div>
        <!--分割线-->
        <van-divider />


    </div>


    <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">标签</van-tabbar-item>
        <van-tabbar-item icon="search">标签</van-tabbar-item>
        <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
        <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>

</template>
<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const photolist = ref([])
//更多手机
const doubleMphone=ref()
const mnotebook = ref()
//更多笔记本
const MoreBook = ref()
//更多米家智能
const intelligence=ref()


onMounted(() => {
    axios.get('https://apis.netstart.cn/xmsc/home/page').then((res) => {
        console.log(res.data.data.data.sections)
        photolist.value = res.data.data.data.sections
        doubleMphone.value =res.data.data.data.sections[8].body.items
        mnotebook.value = res.data.data.data.sections[10].body.items
        MoreBook.value = res.data.data.data.sections[12].body.items
        intelligence.value = res.data.data.data.sections[14].body.items
    })
})
const onClickButton = (path) => {
    window.location.href = "https://m.mi.com/commodity/detail/"+path
    
}

const generateLink=(notebook) => { 
    let baseUrl = 'https://m.mi.com/commodity/detail/';

    return baseUrl + notebook.action.path;
}
//更多笔记本
const getMoreBook = (MoreBook) => { 
    let baseUrl = 'https://m.mi.com/channel/all/';
    return baseUrl + MoreBook.action.path;
}
//更多米家智能
const getMhome = (Mhome) => {
    let baseUrl = 'https://m.mi.com/channe/all/';
    return baseUrl + Mhome.action.path;
}

</script>
<style scoped>
.auto_fill{
    width: 100%;/* 容器占据全部宽度 */
}
.productbtn .van-action-bar-button{
    width: 140px;
    border-radius: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
}
.van-image .info{
    margin-left: 5px;
}
.products{
    margin-bottom: 70px;
}
.info .brief{
    white-space: nowrap;
        /* 规定文本不进行换行 */
        overflow: hidden;
        /* 超出部分隐藏起来 */
        text-overflow: ellipsis;
        /* 超出部分以省略号显示（可选，也可以省略此项） */
        color: #7f7f89;
        font-size: 14px;
}

.phones{
    height: 40px;
    display: flex;
    text-align: center;
    justify-content: center;
    margin-top: 40px;
    a{
    color: #7f7f89;
    font-size: 18px;
    line-height: 50px;
  
    }
}
.mbook{
    height: 40px;
        display: flex;
        text-align: center;
        justify-content: center;
        /* margin-top: 40px; */
    
        a {
            color: #7f7f89;
            font-size: 18px;
            line-height: 50px;
    
        }
}

.van-divider{
    background-color: rgb(234, 237, 241);
    height: 10px;
}
</style>